<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style type="text/css">
    #choise label{margin-left: 30px;}
    .detail{
        z-index: 19891015;
        /*width: 360px;*/
        height: 50%;
        display: none;
        /*margin-left: -66%;*/
        border: 1px solid #666;
        /*border-radius: 0.5;*/
        box-shadow: 1px 1px 50px rgb(0 0 0 / 30%) !important;
    }
    #loading {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(/assets/img/loading.gif) no-repeat center;
        z-index: 9999;
        text-align: center;
        display: none
    }
    #loading img {
        position: absolute;
        top: 30%
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#one" data-toggle="tab">数据概览</a></li>
            <li class=""><a href="#two" data-toggle="tab" id="jobn">jobN任务数据</a></li>
            <li class=""><a href="#three" data-toggle="tab" id="logs">当日请求统计数据</a></li>
            <li class=""><a href="#four" data-toggle="tab" id="mysql">数据库分析</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="content" style="background:#f1f4f6;">
                    <div class="row">
                        <div class="col-xs-6 col-sm-3">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <div class="pull-right">
                                        <h4>Job分表记录总数</h4>
                                        <h3><span id="jobsTotal">0</span>
                                        </h3>
                                    </div>
                                    <div class="pull-left" style="color:#c8cfff;">
                                        <i class="fa fa-dedent fa-4x"></i><br>
                                    </div>
                                </div>
                                <div class="panel-footer">
                                    统计时间:<span class="statisticsTime">2021-11-11 09:15:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <div class="pull-right">
                                        <h4>当日Record总数</h4>
                                        <h3>
                                            <span id="recordTotal">0</span>
                                        </h3>
                                    </div>
                                    <div class="pull-left" style="color:#ffc8c8;">
                                        <i class="fa fa-list-ul fa-4x"></i>
                                    </div>
                                </div>
                                <div class="panel-footer">
                                    统计时间:<span class="statisticsTime">2021-11-11 09:15:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <div class="pull-right">
                                        <h4>当日Result总数</h4>
                                        <h3 id="resultTotal">0</h3>
                                    </div>
                                    <div class="pull-left" style="color:#c8e3ff;">
                                        <i class="fa fa-list-ul fa-4x"></i>
                                    </div>
                                </div>
                                <div class="panel-footer">
                                    统计时间:<span class="statisticsTime">2021-11-11 09:15:00</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-3">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <div class="pull-right">
                                        <h4>当日请求总数</h4>
                                        <h3 id="requestTotal">0</h3>
                                    </div>
                                    <div class="pull-left" style="color:#ffe9c8;">
                                        <i class="fa fa-list-ul fa-4x"></i>
                                    </div>
                                </div>
                                <div class="panel-footer">
                                    统计时间:<span class="statisticsTime">2021-11-11 09:15:00</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px;">
                        <div class="col-xs-12 col-sm-4">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <h4>Records记录(统计时间:<span class="rrtime">0000-00-00 00:00:00</span>)</h4>
                                    <table class="table" style="width:100%">
                                        <thead>
                                        <tr>
                                            <th class="text-center">类型</th>
                                            <th class="text-center">数量</th>
                                        </tr>
                                        </thead>
                                        <tbody id="records">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <h4>Result记录(统计时间:<span class="rrtime">0000-00-00 00:00:00</span>)</h4>
                                    <table class="table" style="width:100%">
                                        <thead>
                                        <tr>
                                            <th class="text-center">类型</th>
                                            <th class="text-center">数量</th>
                                        </tr>
                                        </thead>
                                        <tbody id="result">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px;">
                        <div class="col-xs-12 col-sm-6">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body" id="form1">
                                    <h4>Config数据分布<h5>(每5分钟统计一次数据)</h5></h4>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" style="width:360px;" >
                                    </div>
                                    <table class="table" style="width:100%">
                                        <thead>
                                        <tr>
                                            <th class="text-center">configId</th>
                                            <th class="text-center">任务总数</th>
                                        </tr>
                                        </thead>
                                        <tbody id="configs">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <h4>用户数据统计</h4>
                                    <form id="form2" action="" role="form" novalidate="novalidate" class="form-inline nice-validator n-default n-bootstrap">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </span>
                                            <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" style="width:360px;" >
                                        </div>
                                    </form>
                                    <table class="table" style="width:100%">
                                        <thead>
                                        <tr>
                                            <th class="text-center">用户地址</th>
                                            <th class="text-center">任务总数</th>
                                        </tr>
                                        </thead>
                                        <tbody id="userdata">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="two">
                <div class="col-xs-12 col-sm-12" style="overflow-x: scroll; white-space: nowrap;">
                    统计时间:<span id="jobRounds_time">0000-00-00 00:00:00</span>
                    <table class="table" style="width:102%;max-width:150%;" >
                        <thead >
                            <tr id="job_round_column"></tr>
                        </thead>
                        <tbody >
                            <tr id="job_rounds"></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="three">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="row">
                            <div class="col-xs-4" style="margin-bottom:15px;">
                                <div class="panel panel-default panel-intro panel-statistics">
                                    <div class="panel-body">
                                        <h3>当日总数</h3>
                                        <h4 id="total">0</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-4" style="margin-bottom:15px;">
                                <div class="panel panel-default panel-intro panel-statistics">
                                    <div class="panel-body">
                                        <h3>成功总数</h3>
                                        <h4 id="succ">0</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-4" style="margin-bottom:15px;">
                                <div class="panel panel-default panel-intro panel-statistics">
                                    <div class="panel-body">
                                        <h3>失败总数</h3>
                                        <h4 id="fail">0</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top:20px;">
                    <div class="col-xs-12 col-sm-12">
                        <div class="panel panel-default panel-intro panel-statistics">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-8 col-xs-12" id="choise">
                                        URI类型
                                        <label><input id="row[defaultpaytype]-wechat" name="type" type="radio" value="1" checked=""> GETJOB</label>
                                        <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="2" > GETREAP</label>
                                        <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="3">GETREAP-DEVICE</label>
                                        <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="4" > GETCREATE</label>
                                        <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="5" > UPDATEJOB</label>
                                        <label><input id="row[defaultpaytype]-alipay" name="type" type="radio" value="6" > QUICK-SORT</label>
                                        <label><input id="row[defaultpaytype]-balance" name="type" type="radio" value="7" > GETDSP</label>
                                    </div>
                                </div>
                                <table class="table" style="width:100%">
                                    <thead>
                                    <tr id="logtotals_column">

                                    </tr>
                                    </thead>
                                    <tbody id="tbodys">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" style="margin-top:20px;">
                    <div class="col-xs-12 col-sm-12">
                        <div class="panel panel-default panel-intro panel-statistics">
                            <div class="panel-body" id="form1_logs">
                                <h4 style="font-weight:bold;color: #060606;">历史数据</h4>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </span>
                                    <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" style="width:360px;" >
                                </div>
                                <table class="table" style="width:100%">
                                    <thead>
                                    <tr id="logs_column">


                                    </tr>
                                    </thead>
                                    <tbody id="datetbody">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="four">
                <div class="panel-heading">
                    <h2 style="font-weight:900;" id="network_traffic"></h2>
                    <h3 style="font-weight:600;" id="times"></h3>
                </div>
                <div class="content" style="background:#f1f4f6;">
                    <div class="row" style="margin-top:20px;">
                        <div class="col-xs-12 col-sm-6">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <table class="table" style="width:100%">
                                        <thead>
                                        <tr id="traffic_column">

                                        </tr>
                                        </thead>
                                        <tbody id="traffic_data">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body">
                                    <table class="table" style="width:100%">
                                        <thead>
                                            <tr id="connections_column"></tr>
                                        </thead>
                                        <tbody id="connections_data">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="margin-top:20px;">
                        <div class="col-xs-12 col-sm-12">
                            <div class="panel panel-default panel-intro panel-statistics">
                                <div class="panel-body" id="form1_logs">
                                    <div class="pull-left">
                                        <h4 style="font-weight:bold;color: #060606;">进程信息</h4>
                                    </div>
                                    <div class="pull-right">
                                        <a href="javascript:;" class="btn btn-success btn-refresh" title="刷新" id="refreshsp"><i class="fa fa-refresh"></i> 刷新</a>
                                    </div>
                                    <table class="table" style="width:100%">
                                        <thead>
                                        <tr id="processes_column"></tr>
                                        </thead>
                                        <tbody id="processes_data">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="loading" style="display: none;"></div>
<script type="text/javascript">
    $(function(){
        overview();
        record_result();
        configdis();
        usermange();
        // 数据概览
        function overview(){
            // $('#loading').show();
            $.ajax({
                type: "POST",
                url: '{:url("admin/DataOverview/overview")}',
                // async:true,
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res) {
                    console.log(res);
                    if (res != null) {

                        $('#jobsTotal').html(res.jobsTotal);
                        $('#recordTotal').html(res.recordTotal);
                        $('#resultTotal').html(res.resultTotal);
                        $('#requestTotal').html(res.requestTotal);
                        $('.statisticsTime').html(res.time);
                        // record_result();
                    };

                },
            });
        }
        // Record和Result记录统计
        function record_result(){
            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/record_result")}',
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res) {
                    if (res != null) {
                        let rrtime = res.time;
                        $('.rrtime').html(rrtime);
                        let res2 = res.row;
                        let record = res2.record;
                        let result = res2.result;
                        let records_html="";
                        $('#records').empty();
                        for (var i = 0; i < record.length; i++) {
                            records_html+= '<tr><td><h5 class="text-center">'+record[i].stage+'</h5></td>';
                            records_html+=     '<td><h5 class="text-center">'+record[i].total+'</h5></td>';
                            records_html+=     '</tr>';
                        };
                        $('#records').append(records_html);

                        let result_html="";
                        $('#result').empty();
                        for (var i = 0; i < result.length; i++) {
                            result_html+= '<tr><td><h5 class="text-center">'+record[i].stage+'</h5></td>';
                            result_html+=     '<td><h5 class="text-center">'+record[i].total+'</h5></td>';
                            result_html+=     '</tr>';
                        };
                        $('#result').append(result_html);
                        // configdis();
                    };

                },
            });
        }

        // Config数据
        function configdis(){
            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/configdis")}',
                // async:true,
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res4) {
                    if (res4 != null) {
                        let data = res4.data;
                        let html="";
                        $('#configs').empty();
                        for (var i = 0; i < data.length; i++) {
                            html+= '<tr><td><h5 class="text-center">'+data[i].round_config_id+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].total+'</h5></td>';
                            html+=     '</tr>';
                        };
                        $('#configs').append(html);
                        // usermange();
                    }
                },
            });
        }
        // Reap任务用户统计
        function usermange(){
            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/usermange")}',
                // async:true,
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res5) {
                    console.log(res5);
                    if (res5 != null) {
                        let data = res5;
                        let html="";
                        for (var i = 0; i < data.length; i++) {
                            html+= '<tr><td><h5 class="text-center">'+data[i].user+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].total+'</h5></td>';
                            html+=     '</tr>';
                        };
                        $('#loading').hide();
                        $('#userdata').append(html);
                    }
                },
            });
        }
    })
    var job = 0;
    // 任务轮数分配
    $('#jobn').click(function(){
        if (job == 0) {
            $('#loading').show();
            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/job_round")}',
                // async:true,
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res3) {
                    if (res3 != null) {
                        let column = res3.column;
                        let result = res3.data[0];
                        let times = res3.time;
                        let html="";
                        // $('#job_round_column').empty();
                        for (var i in column) {
                            html+= '<th width="80"><h5 class="text-center">'+column[i]+'</h5></th>';
                        };
                        $('#job_round_column').append(html);

                        let job_html="";
                        // $('#job_rounds').empty();
                        for (var i in result) {
                            job_html+= '<td><h5 class="text-center">'+result[i]+'</h5></td>';
                        };
                        $('#job_rounds').append(job_html);
                        $('#jobRounds_time').html(times)
                        job = 1;
                        $('#loading').hide();
                    }
                },
            });
        };
    })
    // 请求统计数据
    var logs=0;
    $('#logs').click(function(){
        if (logs == 0) {
            $('#loading').show();
            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/logs_total")}',
                // async:true,
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res) {
                    console.log(res);
                    if (res != null) {
                        $('#total').html(res.total);
                        $('#succ').html(res.succ);
                        $('#fail').html(res.fail);
                        let column = res.column;
                        let data = res.data;

                        let html="";
                        for (var i in column) {
                            html+= '<th ><h5 class="text-center">'+column[i]+'</h5></th>';
                        };
                        $('#logtotals_column').append(html);
                        $('#tbodys').empty();
                        console.log(data);
                        let htmls="";
                        for (var i = 0; i < data.length; i++) {
                            htmls+= '<tr><td><h5 class="text-center">'+data[i].total+'</h5></td>';
                            htmls+=     '<td><h5 class="text-center">'+data[i].status+'</h5></td>';
                            htmls+=     '<td><h5 class="text-center">'+data[i].info+'</h5></td>';
                            htmls+=     '</tr>';
                        };
                        $('#tbodys').append(htmls);
                    }
                },
            });

            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/logs")}',
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res) {
                    console.log(res);
                    if (res != null) {
                        let column = res.column;
                        let theadhtml="";
                        for (var i in column) {
                            theadhtml+= '<th ><h5 class="text-center">'+column[i]+'</h5></th>';
                        };
                        theadhtml+='<th width="24%"><h5 class="text-center">详情</h5></th>';
                        $('#logs_column').append(theadhtml);


                        let data = res.data;
                        let html="";
                        for (var i = 0; i < data.length; i++) {
                            let info = data[i].info;
                            let detail_html = '<h5 class="text-center"><button type="button" class="btn btn-success details"><i class="fa fa-list-ul"></i>查看详情</button></h5>';
                            if (info.length > 0) {
                                let detail = '';
                                for (var m = 0; m < info.length; m++) {
                                    detail+= '<tr><td><h5 class="text-center">'+info[m].total+'</h5></td>';
                                    detail+=     '<td><h5 class="text-center">'+info[m].status+'</h5></td>';
                                    detail+=     '<td><h5 class="text-center">'+info[m].info+'</h5></td>';
                                    detail+=     '</tr>';
                                };
                                detail_html = '<h5 class="text-center">';
                                detail_html+=        '<button type="button" class="btn btn-success details"><i class="fa fa-list-ul"></i>查看详情</button>';
                                detail_html+=    '</h5><div class="detail"><table class="table" style="width:100%">';
                                detail_html+=     '<thead><tr><th class="text-center">总数</th><th class="text-center">状态</th><th class="text-center">备注</th></tr></thead>';
                                detail_html+=     '<tbody>'+detail+'</tbody></table></div>';
                            };
                            if (info.length == 0) {
                                detail_html = '<h5 class="text-center"><button type="button" class="btn btn-success details"><i class="fa fa-list-ul"></i>查看详情</button>';
                                detail_html+=    '</h5><div class="detail text-center">暂 无 详 情 ...</div>';
                            }
                            html+= '<tr><td><h5 class="text-center">'+data[i].date+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].uri+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].total+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].succ+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].fail+'</h5></td>';
                            html+=     '<td><h5 class="text-center">'+data[i].created_at+'</h5></td>';
                            html+=     '<td>'+detail_html+'</td>';
                            html+=     '</tr>';
                        };
                        $('#loading').hide();
                        logs = 1;
                        $('#datetbody').append(html);
                    }

                    $('.details').click(function(){
                        let disp = $(this).parent().next().css('display');
                        if (disp == 'block') {
                            $(this).parent().next().css('display','none');
                        } else{
                            $(this).parent().next().css('display','block');
                        };
                    })

                },
            });

        };
    })
</script>
<!-- 数据库分析 -->
<script type="text/javascript">
    var mysqls = 0;
    var nums = 0;
    // 数据库分析
    $('#mysql').click(function(){
        if (mysqls == 0) {
            $('#loading').show();
            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/mysql")}',
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res) {
                    console.log(res);
                    if (res != null) {
                        $('#network_traffic').html('自启动以来的网络流量：'+res.network_traffic);
                        $('#times').html('此Mysql 服务器已运行 '+res.uptime+'，启动时间为 '+res.start_time);

                        let column = res.traffic.column;
                        let result = res.traffic.data;
                        let html="";
                        for (var i in column) {
                            html+= '<th width="80"><h5 class="text-center">'+column[i]+'</h5></th>';
                        };
                        $('#traffic_column').append(html);
                        let job_html="";
                        for (var i in result) {
                            job_html+= '<tr><td><h5 class="text-center">'+result[i].name+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].number+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].per_hour+'</h5></td></tr>';
                        };
                        $('#traffic_data').append(job_html);

                        let connections_column=res.connections.column;
                        let connections_data=res.connections.data;
                        let con_html="";
                        for (var i in connections_column) {
                            con_html+= '<th width="80"><h5 class="text-center">'+connections_column[i]+'</h5></th>';
                        };
                        $('#connections_column').append(con_html);
                        let data_html="";
                        for (var i in connections_data) {
                            data_html+= '<tr><td><h5 class="text-center">'+connections_data[i].name+'</h5></td>';
                            data_html+= '<td><h5 class="text-center">'+connections_data[i].number+'</h5></td>';
                            data_html+= '<td><h5 class="text-center">'+connections_data[i].per_hour+'</h5></td>';
                            data_html+= '<td><h5 class="text-center">'+connections_data[i].percentage+'</h5></td></tr>';
                        };
                        $('#connections_data').append(data_html);
                        nums = 1;
                        mysql_processes();
                    }
                },
            });
        };
    })
    function mysql_processes(){
        if (nums == 1) {
            $.ajax({
                type: "GET",
                url: '{:url("admin/DataOverview/processes")}',
                dataType: "json", //声明成功使用json数据类型回调
                success: function(res) {
                    console.log(res);
                    if (res != null) {

                        let column = res.processes.column;
                        let result = res.processes.data;
                        console.log(result);
                        let html="";
                        $('#processes_column').empty();
                        for (var i in column) {
                            html+= '<th width="80"><h5 class="text-center">'+column[i]+'</h5></th>';
                        };
                        $('#processes_column').append(html);

                        let job_html="";
                        $('#processes_data').empty();
                        for (var i in result) {
                            job_html+= '<tr><td><h5 class="text-center">'+result[i].Id+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].User+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].Host+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].db+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].Command+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].Time+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].State+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].Info+'</h5></td>';
                            job_html+= '<td><h5 class="text-center">'+result[i].Progress+'</h5></td></tr>';
                        };
                        $('#processes_data').append(job_html);
                        mysqls = 1;
                        $('#loading').hide();
                    }
                },
            });
        }
    }
    $('#refreshsp').click(function(){
        $('#loading').show();
        mysql_processes();
    })
</script>
<script type="text/javascript">
    $('#form1 .datetimerange').daterangepicker({
        timePicker: true, //显示时间
        timePicker24Hour: true, //时间制
        timePickerSeconds: true, //时间显示到秒
        startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
        endDate: moment(new Date()), //设置结束器日期
          // maxDate: moment(new Date()), //设置最大日期
        "opens": "center",
        ranges: {
             // '今天': [moment(), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
             '上周': [moment().subtract(6, 'days'), moment()],
             '前30天': [moment().subtract(29, 'days'), moment()],
              '本月': [moment().startOf('month'), moment().endOf('month')],
              '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
         },
         showWeekNumbers: true,
         locale: {
             format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
             applyLabel: '确定', //确定按钮文本
             cancelLabel: '取消', //取消按钮文本
             customRangeLabel: '自定义',
             daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
              monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                 '七月', '八月', '九月', '十月', '十一月', '十二月'
              ],
              firstDay: 1
         },
     }, function(start, end, label) {
        let starts = start.format('YYYY-MM-DD HH:mm:ss');
        let ends = end.format('YYYY-MM-DD HH:mm:ss');
        // console.log(starts);
        // console.log(ends);
        $('#loading').show();
        $.ajax({
            type: "GET",
            url: '{:url("admin/DataOverview/configdis")}?start='+starts+'&end='+ends,
            dataType: "json", //声明成功使用json数据类型回调
            success: function(res) {
                console.log(res);
                let data = res.data;
                let html="";
                $('#configs').empty();
                for (var i = 0; i < data.length; i++) {
                    html+= '<tr><td><h5 class="text-center">'+data[i].round_config_id+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+data[i].total+'</h5></td>';
                    html+=     '</tr>';
                };
                $('#loading').hide();
                $('#configs').append(html);
            },
        });

    });

    $('#form2 .datetimerange').daterangepicker({
        timePicker: true, //显示时间
        timePicker24Hour: true, //时间制
        timePickerSeconds: true, //时间显示到秒
        startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
        endDate: moment(new Date()), //设置结束器日期
        "opens": "center",
        ranges: {
             // '今天': [moment(), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
             '上周': [moment().subtract(6, 'days'), moment()],
             '前30天': [moment().subtract(29, 'days'), moment()],
              '本月': [moment().startOf('month'), moment().endOf('month')],
              '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
         },
         showWeekNumbers: true,
         locale: {
             format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
             applyLabel: '确定', //确定按钮文本
             cancelLabel: '取消', //取消按钮文本
             customRangeLabel: '自定义',
             daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
              monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                 '七月', '八月', '九月', '十月', '十一月', '十二月'
              ],
              firstDay: 1
         },
     }, function(start, end, label) {
        let starts = start.format('YYYY-MM-DD HH:mm:ss');
        let ends = end.format('YYYY-MM-DD HH:mm:ss');
        $('#loading').show();
        $.ajax({
            type: "GET",
            url: '{:url("admin/DataOverview/usermange")}?start='+starts+'&end='+ends,
            dataType: "json", //声明成功使用json数据类型回调
            success: function(res) {
                console.log(res);
                let html="";
                $('#userdata').empty();
                for (var i = 0; i < res.length; i++) {
                    html+= '<tr><td><h5 class="text-center">'+res[i].user+'</h5></td>';
                    html+=     '<td><h5 class="text-center">'+res[i].total+'</h5></td>';
                    html+=     '</tr>';
                };
                $('#loading').hide();
                $('#userdata').append(html);
            },
        });
    });
</script>
<!-- 请求统计数据 -->
<script type="text/javascript">

    $('#choise input[name="type"]').change(function(){
        $('#loading').show();
        $.ajax({
            type: "GET",
            url: '{:url("admin/DataOverview/logs_total")}?type='+this.value,
            dataType: "json", //声明成功使用json数据类型回调
            success: function(res) {
                if (res != null) {
                    let data = res.data;
                    let html="";
                    $('#tbodys').empty();
                    for (var i = 0; i < data.length; i++) {
                        html+= '<tr><td><h5 class="text-center">'+data[i].total+'</h5></td>';
                        html+=     '<td><h5 class="text-center">'+data[i].status+'</h5></td>';
                        html+=     '<td><h5 class="text-center">'+data[i].info+'</h5></td>';
                        html+=     '</tr>';
                    };
                    $('#loading').hide();
                    $('#tbodys').append(html);
                }
            },
        });
    })
    $('#form1_logs .datetimerange').daterangepicker({
        timePicker: true, //显示时间
        timePicker24Hour: true, //时间制
        timePickerSeconds: true, //时间显示到秒
        startDate: moment().hours(0).minutes(0).seconds(0), //设置开始日期
        endDate: moment(new Date()), //设置结束器日期
          // maxDate: moment(new Date()), //设置最大日期
        "opens": "center",
        ranges: {
             // '今天': [moment(), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
             '上周': [moment().subtract(6, 'days'), moment()],
             '前30天': [moment().subtract(29, 'days'), moment()],
              '本月': [moment().startOf('month'), moment().endOf('month')],
              '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
         },
         showWeekNumbers: true,
         locale: {
             format: "YYYY-MM-DD HH:mm:ss", //设置显示格式
             applyLabel: '确定', //确定按钮文本
             cancelLabel: '取消', //取消按钮文本
             customRangeLabel: '自定义',
             daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
              monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                 '七月', '八月', '九月', '十月', '十一月', '十二月'
              ],
              firstDay: 1
         },
     }, function(start, end, label) {
        let starts = start.format('YYYY-MM-DD HH:mm:ss');
        let ends = end.format('YYYY-MM-DD HH:mm:ss');
        $('#loading').show();
        $.ajax({
            type: "GET",
            url: '{:url("admin/DataOverview/logs")}?start='+starts+'&end='+ends,
            dataType: "json", //声明成功使用json数据类型回调
            success: function(res) {
                console.log(res);
                if (res != null) {
                    let data = res.data;
                    let html="";
                    $('#datetbody').empty();
                    for (var i = 0; i < data.length; i++) {
                        let info = data[i].info;
                        let detail_html = '<h5 class="text-center"><button type="button" class="btn btn-success details"><i class="fa fa-list-ul"></i>查看详情</button></h5>';
                        if (info.length > 0) {
                            let detail = '';
                            for (var m = 0; m < info.length; m++) {
                                detail+= '<tr><td><h5 class="text-center">'+info[m].total+'</h5></td>';
                                detail+=     '<td><h5 class="text-center">'+info[m].status+'</h5></td>';
                                detail+=     '<td><h5 class="text-center">'+info[m].info+'</h5></td>';
                                detail+=     '</tr>';
                            };
                            detail_html = '<h5 class="text-center">';
                            detail_html+=        '<button type="button" class="btn btn-success details"><i class="fa fa-list-ul"></i>查看详情</button>';
                            detail_html+=    '</h5><div class="detail"><table class="table" style="width:100%">';
                            detail_html+=         '<thead><tr><th class="text-center">总数</th><th class="text-center">状态</th><th class="text-center">备注</th></tr></thead>';
                            detail_html+=     '<tbody>'+detail+'</tbody></table></div>';
                        };
                        if (info.length == 0) {
                            detail_html = '<h5 class="text-center"><button type="button" class="btn btn-success details"><i class="fa fa-list-ul"></i>查看详情</button>';
                            detail_html+=    '</h5><div class="detail text-center">暂 无 详 情 ...</div>';
                        }
                        html+= '<tr><td><h5 class="text-center">'+data[i].date+'</h5></td>';
                        html+=     '<td><h5 class="text-center">'+data[i].uri+'</h5></td>';
                        html+=     '<td><h5 class="text-center">'+data[i].total+'</h5></td>';
                        html+=     '<td><h5 class="text-center">'+data[i].succ+'</h5></td>';
                        html+=     '<td><h5 class="text-center">'+data[i].fail+'</h5></td>';
                        html+=     '<td><h5 class="text-center">'+data[i].created_at+'</h5></td>';
                        html+=     '<td>'+detail_html+'</td>';
                        html+=     '</tr>';
                    };
                    $('#loading').hide();
                    $('#datetbody').append(html);
                }
                $('.details').click(function(){
                    let disp = $(this).parent().next().css('display');
                    if (disp == 'block') {
                        $(this).parent().next().css('display','none');
                    } else{
                        $(this).parent().next().css('display','block');
                    };
                })
            },
        });
    });
</script>
